<template>
    <div id="shopcart">
        <div class="content">
            <div class="chart-icon-wrapper">
                <div class="chart-icon icon-shopping_cart" :class="{noZChart: totalCount !== 0}" @click="showCartList"></div>
                <div class="total-count" v-show="totalCount !== 0">{{totalCount}}</div>
            </div>
            <div class="deliver-fee">
                <div class="price border-1px-right" :class="{noZPrice: totalCount != 0}">￥{{totalPrice}}</div>
                <div class="deliveryPrice" >另需配送费{{deliveryPrice}}元</div>
            </div>
            <div class="deliver-base" :class="{ok: totalPrice >= 20}" @click="clickSubmit">{{info}}</div>
        </div>
        <div class="cart-list-wrapper" v-show="showList">
            <div class="cart-gray" v-on:click="showCartList"></div>
            <div class="cart-list" ref="listScroll">
                <div class="cart-item">
                    <div class="cart-list-header">
                        <span class="cart-title">购物车</span>
                        <span class="clear" @click="clearAll">清空</span>
                    </div>
                    <div class="food-item" v-for="food in selectFood" :key="food.id">
                        <span class="food-title">{{food.name}}</span>
                        <span class="food-price">￥{{food.price}}</span>
                        <cartControl class="cart-control" :food="food"></cartControl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import cartControl from "./cartControl";
import BScroll from "better-scroll";
import Vue from "vue";
import { mapState } from "vuex";
import { mapMutations } from "vuex";

export default {
  name: "shopcart",
  components: {
    cartControl
  },
  data() {
    return {
      fold: true
    };
  },
  props: {
    deliveryPrice: {
      type: Number
    },
    minPrice: {
      type: Number
    }
  },
  methods: {
    ...mapMutations({
      setTotalCount: "setTotalCount",
      setTotalPrice: "setTotalPrice"
    }),
    showCartList() {
      // 改变fold的属性，这样就能触发计算属性的计算，这样就可以实现状态的切换
      if (!this.selectFood.length) {
        return;
      } else {
        this.fold = !this.fold;
      }
    },
    clearAll() {
      this.selectFood.forEach(food => {
        food.count = 0;
      });
    },
    clickSubmit() {
      if (this.totalPrice >= 20) {
        alert("this just a demo");
      }
    }
  },
  computed: {
    ...mapState({
      totalCount: "totalCount",
      totalPrice: "totalPrice",
      selectFood: "selectFood"
    }),
    info() {
        // 根据当前总价和minPrice的比较来判断deliver-base的交互
        if (this.totalPrice === 0) {
            return `还差￥${this.minPrice}`;
        } else if (this.totalPrice > 0 && this.totalPrice < 20) {
            return `还差￥${this.minPrice - this.totalPrice}`;
        } else {
            return `去结算`;
        }
    },
    showList() {
        if (!this.totalCount) {     // 这里的计算属性是一直的在计算的，一旦fold发生改变就重新计算
            this.fold = true;       // 没有添加的时候初始化状态
            return false;
        }
        let show = !this.fold;
        if (show) {
            this.$nextTick(() => {
            if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.listScroll, {
                click: true
                });
            } else {
                this.scroll.refresh();
            }
            });
        }
        return show;
    }
  },
  watch: {
    selectFood() {
      let newCount = 0;
      let newPrice = 0;
      this.selectFood.forEach(food => {
        newCount += food.count;
        newPrice += food.count * food.price;
      });
      this.setTotalCount(newCount);
      this.setTotalPrice(newPrice);
    }
  }
};
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import '../assets/stylus/index.styl';

#shopcart {
    position: fixed;
    width: 100%;
    height: 48px;
    left: 0;
    bottom: 0;
    z-index: 10000;

    .content {
        width: 100%;
        display: flex;
        background-color: #141d27;

        .chart-icon-wrapper {
            flex: 0 0 80px;
            position: relative;

            .chart-icon {
                position: relative;
                width: 44px;
                height: 44px;
                border-radius: 44px;
                border: 6px solid #141d27;
                background: #2b333b;
                margin-left: 18px;
                margin-top: -10px;
                font-size: 24px;
                color: rgba(255, 255, 255, 0.4);
                line-height: 44px;
                text-align: center;

                &.noZChart {
                    background-color: #00a0dc;
                    color: #ffffff;
                }
            }

            .total-count {
                position: absolute;
                right: 0;
                top: -6px;
                text-align: center;
                background-color: red;
                color: #ffffff;
                width: 24px;
                height: 16px;
                font-size: 8px;
                font-weight: 700;
                line-height: 16px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
                border-radius: 16px;
            }
        }

        .deliver-fee {
            flex: 1;
            padding: 12px 0 12px 12px;
            height: 24px;

            .price {
                display: inline-block;
                line-height: 24px;
                color: rgba(255, 255, 255, 0.4);
                border-1px-right(rgba(255, 255, 255, 0.4));
                padding-right: 12px;

                &.noZPrice {
                    color: #ffffff;
                }
            }

            .deliveryPrice {
                display: inline-block;
                padding-left: 12px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.6);
                line-height: 20px;
                font-weight: 600;
            }
        }

        .deliver-base {
            flex: 0 0 105px;
            padding: 0 8px;
            line-height: 48px;
            font-size: 12px;
            text-align: center;
            color: rgba(255, 255, 255, 0.3);
            font-weight: 700;
            background-color: #2b333b;

            &.ok {
                background-color: green;
                color: #ffffff;
            }
        }
    }

    .cart-list-wrapper {
        position: fixed;
        top: 0px;
        bottom: 48px;
        width: 100%;
        display: flex;
        flex-direction: column;
        z-index: -1; // 让那个圆能够完整的显示出来
        .cart-gray {
            flex: 1;
            background-color: rgba(7, 17, 27, 0.6);
        }
        .cart-list {
            width: 100%;
            position: fixed;
            bottom: 48px;
            left: 0;
            background-color: #ffffff;
            overflow: hidden;
            height: 217px;
            .cart-item {
                width 100%
                .cart-list-header {
                    height: 40px;
                    line-height: 40px;
                    padding: 0 18px;
                    border-1px(rgba(7, 17, 27, 0.1));
                    background-color: #f3f5f7;

                    .cart-title {
                        font-size: 14px;
                        font-weight: 500;
                        color: rgb(7, 17, 27);
                    }

                    .clear {
                        position: absolute;
                        right: 18px;
                        font-size: 12px;
                        color: rgb(0, 160, 220);
                    }
                }
                .food-item {
                    // width: 100%;
                    height: 48px;
                    line-height: 48px;
                    margin: 0 18px 0 18px;
                    border-1px(rgba(7, 17, 27, 0.1));
                    .food-title {
                        font-size: 14px;
                        color: rgb(7, 17, 27);
                        font-weight: 700;
                    }
                    .food-price {
                        position: absolute;
                        right: 120px;
                        font-size: 13px;
                        color: #f01414;
                        font-weight: 700;
                    }

                    .cart-control {
                        position: absolute;
                        right: 0px;
                        top: 6px;
                        dipslay: inline-block;
                    }
                }
            }
        }
    }
}
</style>


